<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 新 Bootstrap5 核心文件 -->
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <script src="/static/bootstrap/js/popper.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <!-- our project just needs Font Awesome Solid + Brands -->
    <link href="/static/fontawesome/css/all.css" rel="stylesheet" />
    <script src="/static/jquery/jquery-3.7.1.js"></script>
    <script src="/static/jquery/jquery.qrcode.min.js"></script>

    <script src="/static/js/index.js"></script>
    <title>Document</title>
</head>

<body>
    <!-- <i class="fa-solid fa-user"></i> -->
    <!-- uses solid style -->
    <!-- <i class="fa-brands fa-github-square"></i> -->
    <!-- uses brand style -->

    <div class="container-fluid p-5">
        <h1>站点列表</h1>
        <p>所有站点列表，可以生成站点静态二维码。</p>

        <div class="dropdown dropend">
            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
                下拉菜单按钮
            </button>
            <ul class="dropdown-menu">
                {% for item in data %}
                <li><a class="spot-item dropdown-item d-flex align-items-center gap-2 py-2" href="#"
                        data-idx="{{item.id}}">
                        {% if item.status %}
                        <span class="d-inline-block bg-success rounded-circle"
                            style="width: .5em; height: .5em;"></span>
                        {% else %}
                        <span class="d-inline-block bg-danger rounded-circle" style="width: .5em; height: .5em;"></span>
                        {% endif %}
                        {{ item.nicename }}</a></li>
                {% endfor %}
            </ul>
        </div>

        <table class="table table-striped my-1" id="spotlist">
            <thead class="table-dark">
                <tr>
                    <th>ID</th>
                    <th>BaseName</th>
                    <th>单价</th>
                    <th>动作</th>
                </tr>
            </thead>
            <tbody> </tbody>
        </table>
        <ul class="pagination">
            <li class="page-item"><a class="page-link" href="#">Previous</a></li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>

        <div id="qrcode"></div>
    </div>
</body>

</html>